<template>
    <el-dialog v-model="updateFormVisible" title="修改菜单" width="600">
     <el-form :model="formData" :rules="menuRules">
      <el-form-item label="父级菜单" label-width="120" prop="pid">
                <el-tree-select
                        v-model="formData.pid"
                        :data="menuList"
                        :props="{children: 'children',label: 'menuName',}"
                        node-key="id"
                        check-strictly
                        :render-after-expand="false"
                        style="width: 240px"
                />
            </el-form-item>
       <el-form-item label="菜单名称" label-width="120" prop="menuName">
         <el-input  autocomplete="off" v-model="formData.menuName" />
       </el-form-item>
       <el-form-item label="菜单描述" label-width="120" prop="menuDesc">
         <el-input  autocomplete="off" v-model="formData.menuDesc" />
       </el-form-item>
       <el-form-item label="菜单图标" label-width="120" prop="icon">
                <el-select v-model="formData.icon" placeholder="请选择图标" style="width: 240px">
                    <template #label="{value}">
                        <el-icon>
                            <component :is="value"></component>
                        </el-icon>
                    </template>
                    <el-option
                            v-for="item in icons"
                            :key="item"
                            :label="item"
                            :value="item"
                    >
                        <el-icon>
                            <component :is="item"></component>
                        </el-icon>
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="排序" label-width="120" prop="sortOrder">
                <el-input-number min="1" autocomplete="off" v-model="formData.sortOrder" />
            </el-form-item>
            <el-form-item label="权限标识符" label-width="120" prop="permissionCode">
                <el-input autocomplete="off"  v-model="formData.permissionCode" />
            </el-form-item>
            <el-form-item label="菜单跳转地址" label-width="120" prop="url">
                <el-input autocomplete="off" v-model="formData.url" />
            </el-form-item>
        </el-form>
    
     <template #footer>
       <div class="dialog-footer">
         <el-button @click="updateFormVisible = false">取消</el-button>
         <el-button type="primary" @click="save()">
           提交
         </el-button>
       </div>
     </template>
   </el-dialog>
 </template>
 
 <script setup>
 import axios from '@/axios/index';  
 import { defineModel, onMounted, reactive, ref } from 'vue'
 import {ElMessage} from "element-plus";

//  let updateFormVisible = true
 let updateFormVisible = defineModel('updateFormVisible')
 const emit = defineEmits(['loadTableData'])
 let props = defineProps([
    'tableData',
    'rowData'
 ])

 //菜单修改表单校验规则
 const menuRules = reactive({
    pid:[{ required: true, message: '请选择父级菜单', trigger: 'change'},],
    menuName:[{ required: true, message: '请输入菜单名称', trigger: 'change'}],
    menuDesc:[{ required: true, message: '请输入菜单描述', trigger: 'change'}],
    icon:[{ required: true, message: '请选择图标', trigger: 'change'}],
    sortOrder:[{ required: true, message: '请选择排序序号', trigger: 'change'},],
    permissionCode:[{ required: true, message: '请输入权限标识符', trigger: 'change'}],
    url:[{ required: true, message: '请输入菜单跳转地址', trigger: 'change'}],    
    })
 
 
 let formData = reactive({
        id: props.rowData.id,
        pid: props.rowData.pid,
        menuName: props.rowData.menuName,
        menuDesc: props.rowData.menuDesc,
        icon: props.rowData.icon,
        sortOrder: props.rowData.sortOrder,
        permissionCode: props.rowData.permissionCode,
        url: props.rowData.url
    })
    

    // let formData = reactive({
    //     id:1,
    //     pid:'',
    //     menuName: '',
    //     menuDesc: '',
    //     icon: '',
    //     sortOrder: '',
    //     url: '',
    //     permissionCode: ''
    // })
 
 function save() {
     axios.post('/menu/update',formData,{headers: {'content-type': 'application/json'}}).then(resp => {
       ElMessage({
                 message: resp.data.message,
                 type: 'success',
                 duration: 1500,
                 onClose: function(){
                    updateFormVisible.value = false
                     emit('loadTableData')
                     props.tableData = []
                 }
             })
     }); 
 }

 let menuList = [{
        id: 0,
        menuName: '根菜单',
        children: props.tableData
    }]

 
 //菜单集合
 let icons = ['Plus','Minus','CirclePlus','Search','Female','Male','Aim','House','FullScreen','Loading','Link',
        'Service','Pointer','Star','Notification','Connection','ChatDotRound','Setting','Clock','Position','Discount',
        'Odometer','ChatSquare','ChatRound','ChatLineRound','ChatLineSquare','ChatDotSquare','View','Hide','Unlock','Lock',
        'RefreshRight','RefreshLeft','Refresh','Bell','MuteNotification','User','Check','CircleCheck','Warning','CircleClose',
        'Close','PieChart','More','Compass','Filter','Switch','Select','SemiSelect','CloseBold','EditPen','Edit','Message',
        'MessageBox','TurnOff','Finished','Delete','Crop','SwitchButton','Operation','Open','Remove','ZoomOut','ZoomIn',
        'InfoFilled','CircleCheckFilled','SuccessFilled','WarningFilled','CircleCloseFilled','QuestionFilled','WarnTriangleFilled',
        'UserFilled','MoreFilled','Tools','HomeFilled','Menu','UploadFilled','Avatar','HelpFilled','Share','StarFilled',
        'Comment','Histogram','Grid','Promotion','DeleteFilled','RemoveFilled','CirclePlusFilled']

 </script>
 
 <style>
 .avatar-uploader .el-upload {
         border: 1px dashed var(--el-border-color);
         border-radius: 6px;
         cursor: pointer;
         position: relative;
         overflow: hidden;
         transition: var(--el-transition-duration-fast);
     }
 
     .avatar-uploader .el-upload:hover {
         border-color: var(--el-color-primary);
     }
 
     .el-icon.avatar-uploader-icon {
         font-size: 28px;
         color: #8c939d;
         width: 50px;
         height: 50px;
         text-align: center;
     }
     .avatar-uploader .avatar {
         width: 50px;
         height: 50px;
         display: block;
     }
 </style>